<template>
	<view
        class="gy-popup gy-mask"
        :class="'gy-mask-' + isShow"
        :style="[props.bottom ? {
            bottom: props.bottom + 'px !important',
            height: `calc(100vh - ${props.bottom + 'px'}) !important`
        } : {}]"
        @click.stop="maskCloseFn">
		<view class="gy-popup-panel" :class="'gy-popup-panel-' + isShow" @click.stop="" :style="{backgroundColor: props.bgColor}" >
			<slot name="head">
				<view class="gy-popup-head" :style="{borderBottom: showTitleBorder ? '1rpx solid #E5E6EB' : ''}">
				    <view class="gy-popup-title" v-if="showTitle">{{ props.title }}</view>
				    <view v-if="showClose && props.closeText" class="gy-popup-close-text" @click.stop="closeFn">关闭</view>
						<image v-if="showClose && !props.closeText" :src="CloseIcon" class="gy-popup-close-icon" @click.stop="closeFn" />
				</view>
			</slot>
			<view class="gy-popup-content">
				<slot></slot>
			</view>
			<slot name="action">
				<view v-if="props.action" class="gy-popup-action">
					<view class="confirm" @click.stop="submitFn">{{ props.confirmText }}</view>
				</view>
			</slot>
		</view>
	</view>
</template>

<script lang="ts" setup>

    import {
    	ref
    } from "vue";
	import CloseIcon from '@/static/icon/close-popup.svg';
	const emits = defineEmits(["close", "submit"]);

    const props = defineProps({
    	title: {
    		type: String,
    		default: "弹出层"
    	},
    	closeOnClickMask: {
    		type: Boolean,
    		default: true
    	},
		showClose: {
			type: Boolean,
			default: true
		},
		showTitle:{
			type: Boolean,
			default: true
		},
    	action: {
    		type: Boolean,
    		default: true
    	},
        bottom: {
        	type: Number,
        	default: 0
        },
    	confirmText: {
    		type: String,
    		default: "确定"
    	},
			bgColor: {
				type: String,
				default: '#fff'
			},
			closeText: {
				type: String,
				default: ''
			},
			showTitleBorder: {
				type: Boolean,
				default: false
			}
    });

    const isShow = ref("show");

    function maskCloseFn(){
    	if(props.closeOnClickMask){
    		closeFn();
    	}
    }
    function closeFn() {
    	isShow.value = "hide";
    	setTimeout(() => {
    		emits("close");
    	}, 550)
    }
    function submitFn() {
			emits('submit')
		
    	
    }
    
    defineExpose({
        closeFn: closeFn
    });
	
</script>

<style lang="scss" scoped>
	.gy-popup {
	    .gy-popup-panel {
	        background-color: #FFFFFF;
	        width: 100%;
	        position: absolute;
	        border-top-left-radius: 32rpx;
	        border-top-right-radius: 32rpx;
	        .gy-popup-head{
	            height: 100rpx;
	            @include flex-between-center;
	            padding: 0 var(--gy-gap);
	            .gy-popup-title{
	                width: calc(100% - 90rpx);
	                font-weight: bold;
	                font-size: var(--gy-font-size-medium);
	                color: var(--pt-text-color-title);
	                padding-left: 80rpx;
	                text-align: center;
	                @include text-ellipsis(1);
	            }
	            .gy-popup-close-text{
	                width: 80rpx;
	                height: 80rpx;
	                @include flex-center-center;
	                font-size: var(--gy-font-size-base);
	            }
							.gy-popup-close-icon{
	                width: 40rpx;
	                height: 40rpx;
	                @include flex-center-center;
	                font-size: var(--gy-font-size-base);
	            }
	        }
	        .gy-popup-content{
	            width: 100%;
	            min-height: 100rpx;
	            max-height: calc(100vh - 200rpx);
	            overflow: auto;
							padding-bottom: constant(safe-area-inset-bottom);
							padding-bottom: env(safe-area-inset-bottom);
	        }
	        .gy-popup-action{
	            width: 100%;
	            background-color: #fff;
	            padding: var(--gy-gap) var(--gy-gap) 90rpx var(--gy-gap);
	            .confirm{
	                height: 100rpx;
	                @include flex-center-center;
	                border-radius: 50rpx;
	                color: #ffffff;
	                font-size: var(--gy-font-size-medium);
	                font-weight: 700;
	                padding: 0 var(--gy-gap);
	                background: linear-gradient(315deg, #07BF66 0%, #81AFFF 100%);
	                box-shadow: 0px 3rpx 6rpx #D6E2F8;
	            }
	        }
	    }
	
	    .gy-popup-panel.gy-popup-panel-show{
	        animation: gy-popup-panel-show .5s;
	        animation-fill-mode: forwards;
	    }
	    .gy-popup-panel.gy-popup-panel-hide{
	        animation: gy-popup-panel-hide .5s;
	        animation-fill-mode: forwards;
	    }
	
	    @keyframes gy-popup-panel-show {
	        from {
	            bottom: -100%;
	        }
	
	        to {
	            bottom: 0;
	        }
	    }
	
	    @keyframes gy-popup-panel-hide {
	        from {
	            bottom: 0;
	        }
	
	        to {
	            bottom: -100%;
	        }
	    }
	
	}
	
</style>